<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li ul {
            display:-none;
        }

        li .show {
            display: block;
        }
    </style>
</head>

<body>
    <div id="list">
        <!-- <ul>
            <li>
                <p>第三级菜单</p>
            </li>
        </ul>  -->
        <h2 id="title">ssf</h2>
        <p>654548d</p>
    </div>
    <script>

        var data = [
            {
                id: 0,
                pid: -1,
                title: "微云"
            },
            {
                id: 1,
                pid: 0,
                title: "我的文档"
            },
            {
                id: 2,
                pid: 0,
                title: "我的音乐"
            },
            {
                id: 2999,
                pid: 1,
                title: "js程序设计"
            },
            {
                id: 29000,
                pid: 1,
                title: "js权威指南"
            },
            {
                id: 23333,
                pid: 2,
                title: "王杰"
            },
            {
                id: 244444,
                pid: 2,
                title: "张国荣"
            },
            {
                id: 3,
                pid: 2,
                title: "周杰伦"
            },
            {
                id: 4000,
                pid: 3,
                title: "稻香"
            },
            {
                id: 4,
                pid: 3,
                title: "发如雪"
            },
            {
                id: 600,
                pid: 3,
                title: "夜曲"
            }
        ]

        {

            /***
             * 
             *  利用dom节点来做
             *               <ul>
                                <li>
                                    <p>第三级菜单</p>
                                </li>
                            </ul>
             * **/
            let list = document.querySelector('#list');
            let topPid = -1;
            var title = document.querySelector('#title');
            function renderMenu(id) {
                var childs = getAllChild(id);
                var ulWrap = document.createElement('ul');
                childs.forEach( function(item){
                    var li = document.createElement('li');
                    var p = document.createElement('p');
                    p.innerHTML = item.title;
                    p.onclick = function () {
                        var nextEle = p.nextElementSibling;
                        if( nextEle ) {
                            nextEle.classList.toggle('show'); 
                        }else{
                            alert('没有自己菜单啦');
                        }
                    }
                    li.appendChild(p);
                    ulWrap.appendChild(li);
                    if( getAllChild(item.id).length > 0 ) {
                        li.appendChild(renderMenu(item.id));
                    }
                });
                return ulWrap;
            }
            let scriptChilds = document.querySelector('script');
            //  setTimeout(function(){

            //     list.outerHTML = '<!--' + list.innerHTML + '-->';
            // },countDown( 3 ).sec);
        }

        //根据id == pid 找子级

        function getAllChild(id) {
            return data.filter(item => item.pid == id);
        }
        
        //删除节点

        function delCommet( obj ) {
            obj.forEach( function( item ){
                if( item.nodeType == 8 ) {
                   item.parentNode.removeChild(item);
                }
            });
        }
        function queryNode(node) {
            //查询所有子节点并且放到nodeList这个数组中
            var nodeList = node.childNodes;
            //定义一个数组,用来存放符合要求的元素节点
            var arrNode = [];
            //遍历nodeList这个数组,寻找符合要求的元素节点
            for (var i = 0; i < nodeList.length; i++) {
                var node = nodeList[i];
                //nodeType == 1;元素节点
                //nodeType == 2;属性节点
                //nodeType == 3;文本节点
                if(node.nodeType == 8){
                    arrNode.push(node);
                    //继续进行递归寻找下一级的节点
                    var temp = queryNode(node);
                    //把两个数组进行合并,就是所有符合要求的节点
                    arrNode = arrNode.concat(temp);
                }
            }
            return arrNode;
        }
        //时间
        function countDown( n ) {
            n = parseFloat(n);
            var timeArr = {
                sec :  n *60 ,
                min : n * 60 *60,
                hour : n * 60 *60*60,
                day: n * 60 * 60 * 60 * 24
            }
            return timeArr;
        }
    </script>

</body>

</html>